<script lang="ts" setup>

import { totalagent, admintree } from '@/common/apis/common/index.ts'


import { ref } from 'vue'



import { useUserStore } from "@/pinia/stores/user"
const userStore = useUserStore()


// 
userStore.getInfo((res) => {
  console.log('res getInfo', res);
})

const agent_id = ref('')

const form = ref({
  "total_goods": 0,
  "total_shop": 0,
  "total_order": 1,
  "success_order_count": 0,
  "fail_order_count": 1,
  "total_order_price": 0,
  "total_order_commission": 0,
  "total_today_order_commission": 0,
  "total_yesterday_order_commission": 0,
  "total_today_order_price": 0,
  "total_yesterday_order_price": 0
})
const list = ref([])


totalagent({
  agent_id: agent_id.value
}).then(({ data }) => {
  form.value = data
})

admintree().then(({ data }) => {
  list.value = data
})


const handleChange = (value) => {
  agent_id.value = value[0]
  
  totalagent({
  agent_id: agent_id.value
}).then(({ data }) => {
  form.value = data
})

}

const reset = () => {
  agent_id.value = ''
  totalagent({
  agent_id: agent_id.value
}).then(({ data }) => {
  form.value = data
})
}


</script>
<template>
  <div class="app-container center">
    <div class=" bg-[#F0F9EB] p-4 rounded-md font-[#67C23A] mb-2 text-emerald font-bold">
      我的佣金比例: 0.7000
    </div>
    <div class="mt-4 mb-4 flex">
      <!-- :props="props" -->
      <el-cascader class="mr-2" v-model="agent_id" :options="list" @change="handleChange" />
      <el-button @click="reset">重置</el-button>
    </div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>店铺数量</div>
          </template>
          <div>{{ form.total_shop }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>订单数量</div>
          </template>
          <div>{{ form.total_order }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>已支付订单</div>
          </template>
          <div>{{ form.success_order_count }}</div>
        </el-card>
      </el-col>
    </el-row>

    <div class="h-10"></div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>待支付订单</div>
          </template>
          <div>{{ form.total_order_price }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>
              订单总额
            </div>
          </template>
          <div>{{ form.total_order }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>今日订单金额</div>
          </template>
          <div>{{ form.total_today_order_price }}</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="h-10"></div>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>昨日订单金额</div>
          </template>
          <div>{{ form.total_yesterday_order_price }}</div>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>
              总收益
            </div>
          </template>
          <div>{{ form.total_order_commission }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>
              今日收益
            </div>
          </template>
          <div>{{ form.total_today_order_commission }}</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="h-10"></div>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              昨日收益
            </div>
          </template>
          <div>{{ form.total_yesterday_order_commission }}
          </div>
        </el-card>

      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>商品数量</div>
          </template>
          <div>{{ form.total_goods }}</div>
        </el-card>
      </el-col>
    </el-row>








  </div>
</template>
